<template>
  <div class="main">
    <!--nr start-->
    <div class="test_main">
      <div class="nr_left">
        <!-- 试卷部分 -->
        <div class="test">
          <!-- 交卷按钮 -->
          <div class="test_title">
            <p class="test_time">
              <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
            </p>
            <font><input type="button" name="test_jiaojuan" value="交卷" @click="getPaper"></font>
          </div>
          <!-- 单选题 部分开始-->
          <div class="test_content">
            <div class="test_content_title">
              <h2>单选题</h2>
              <p>
                <span>共</span><i class="content_lit">{{paper.signList.length}}</i><span>题，</span>
                <span>合计</span><i class="content_fs">{{paper.signList.length*1}}</i><span>分</span>
              </p>
            </div>
          </div>
          <!-- 单选题 题目内容 -->
          <div class="test_content_nr">
            <ul v-for="(x,index) in paper.signList">
              <li :id="['qu_0_'+(index+1)]">
                <div class="test_content_nr_tt">
                  <!-- 题号 -->
                  <i>{{index+1}}</i>
                  <!-- 题分数 -->
                  <span>(2分)</span>
                  <!-- 题干 -->
                  <font>{{x.quName}}</font><b class="icon iconfont">&#xe881;</b>
                </div>
                <div class="test_content_nr_main">
                  <ul>
                    <li class="option">
                      <input type="radio" class="radioOrCheck" value="A" :name="['answer'+(index+1)]"
                              />
                      <label >
                        A.
                        <p class="ue" style="display: inline;">{{x.quA}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="radio" class="radioOrCheck" value="B" :name="['answer'+(index+1)]"
                             />
                      <label >
                        B.
                        <p class="ue" style="display: inline;">{{x.quB}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="radio" class="radioOrCheck" value="C" :name="['answer'+(index+1)]"
                             />
                      <label >
                        C.
                        <p class="ue" style="display: inline;">{{x.quC}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="radio" class="radioOrCheck" value="D" :name="['answer'+(index+1)]"
                             />
                      <label >
                        D.
                        <p class="ue" style="display: inline;">{{x.quD}}</p>
                      </label>
                    </li>

                  </ul>
                </div>
              </li>
            </ul>
          </div>
          <!-- 单选题 部分结束-->

          <!-- 多选题 部分开始 -->
          <div class="test_content">
            <div class="test_content_title">
              <h2>多选题</h2>
              <p>
                <span>共</span><i class="content_lit">60</i><span>题，</span>
                <span>合计</span><i class="content_fs">60</i><span>分</span>
              </p>
            </div>
          </div>
          <div class="test_content_nr">
            <ul v-for="(x,index) in paper.moreList">
              <li :id="['qu_1_'+(index+1)]">
                <div class="test_content_nr_tt">
                  <!-- 题号 -->
                  <i>{{index+1}}</i>
                  <!-- 题分数 -->
                  <span>2分</span>
                  <!-- 题干 -->
                  <font>{{x.quName}}</font><b class="icon iconfont">&#xe881;</b>
                </div>
                <div class="test_content_nr_main">
                  <ul>
                    <li class="option">
                      <input type="checkbox" class="radioOrCheck" value="A" :name="['more'+(index+1)]"
                             id="0_answer_1_option_1" />
                      <label >
                        A.
                        <p class="ue" style="display: inline;">{{x.quA}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="checkbox" class="radioOrCheck" value="B" :name="['more'+(index+1)]"
                             id="0_answer_1_option_2" />
                      <label >
                        B.
                        <p class="ue" style="display: inline;">{{x.quB}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="checkbox" class="radioOrCheck" value="C" :name="['more'+(index+1)]"
                             id="0_answer_1_option_3" />
                      <label >
                        C.
                        <p class="ue" style="display: inline;">{{x.quC}}</p>
                      </label>
                    </li>

                    <li class="option">
                      <input type="checkbox" class="radioOrCheck" value="D" :name="['more'+(index+1)]"
                             id="0_answer_1_option_4" />
                      <label >
                        D.
                        <p class="ue" style="display: inline;">{{x.quD}}</p>
                      </label>
                    </li>

                  </ul>
                </div>
              </li>
            </ul>
          </div>
          <!-- 多选题 部分结束-->
        </div>

      </div>

      <!-- 答题卡部分开始 -->
      <div class="nr_right">
        <div class="nr_rt_main">
          <div class="rt_nr1">
            <div class="rt_nr1_title">
              <h1>
                <i class="icon iconfont">&#xe692;</i>答题卡
              </h1>
              <p class="test_time">
                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1"></b>
              </p>
            </div>
            <!-- 单选答题卡开始 -->
            <div class="rt_content">
              <div class="rt_content_tt">
                <h2>单选题</h2>
                <p>
                  <span>共</span><i class="content_lit">2</i><span>题</span>
                </p>
              </div>

              <div class="rt_content_nr answerSheet">
                <ul >
                  <li v-for="(x,index) in paper.signList">
                    <a :href="['#qu_0_'+(index+1)]">{{index+1}}</a>

                  </li>

                </ul>
              </div>
            </div>
            <!-- 单选答题卡结束 -->

            <!-- 多选答题卡开始 -->
            <div class="rt_content">
              <div class="rt_content_tt">
                <h2>多选题</h2>
                <p>
                  <span>共</span><i class="content_lit">2</i><span>题</span>
                </p>
              </div>

              <div class="rt_content_nr answerSheet">
                <ul>
                  <li><a href="#qu_1_1">1</a></li>
                  <li><a href="#qu_1_2">2</a></li>
                </ul>
              </div>
            </div>
            <!-- 多选答题卡结束 -->
          </div>
        </div>
      </div>

      <!-- 答题卡部分结束 -->
    </div>
  </div>
</template>

<script>
    export default {
        name: "Paper",
        data(){
          return{
            paper: {
              signList: [],
              moreList: [],
              time:10,
            },
            selectAnswer:{
                  answerSign:[],
                  answerMore:[]
            }
          }

        },
         methods:{
           closeWin:function(){//浏览器关闭触发的事件
             //注意：关闭事件不会执行alert
             console.log("浏览器即将关闭")
           },
           paperTime(){//答题卡设置和考试倒计时
             $('li.option label').click(function() {
               debugger;
               var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); /*得到题目ID*/
               var cardLi = $('a[href=#' + examId + ']'); /*根据题目ID找到对应答题卡*/
               /*设置已答题*/
               if (!cardLi.hasClass('hasBeenAnswer')) {
                 cardLi.addClass('hasBeenAnswer');
               }
             });

             //获取倒计时间(单位：毫秒)
             var fiveSeconds = new Date().getTime() + this.paper.time*60*6*1000;
             console.log(fiveSeconds);
             $('.alt-1').countdown(fiveSeconds)
               .on('update.countdown', function(event) { //时间更改事件
                 //设置倒计时时间格式
                 $(this).html(event.strftime('<span>%H:%M:%S</span>'));
               })
               .on('finish.countdown', function(event) {
                 alert("结束")
               })
           },
           queryExamByName(){
             const _this = this;
             this.$http.get("/exam/exam",{params:{"examName":"10月17日考试"}})
             .then(function (rs) {
                 console.log(rs.data);
                 if(rs.data.code==200){
                    var arr = rs.data.data.paper.questionList;
                    //考试时长
                    _this.paper.time = rs.data.data.paper.paperTime;
                    for(var i =0;i<arr.length;i++){
                          if(arr[i].quType=="单选题"){
                              _this.paper.signList.push(arr[i]);
                          }else{
                            _this.paper.moreList.push(arr[i]);
                          }
                    }
                 }
             })
           },
           getPaper(){
             //单选
             //清空
             this.selectAnswer.answerSign=[];
              if(this.paper.signList.length>0){
                  for(var i =0;i<this.paper.signList.length;i++){
                    const an = $("[name='answer"+(i+1)+"']:checked").val();
                    this.selectAnswer.answerSign.push(an);
                  }
              }
              console.log(this.selectAnswer.answerSign);

              //多选
             //清空
             this.selectAnswer.answerMore=[];
             if(this.paper.moreList.length>0){
               for(var i =0;i<this.paper.moreList.length;i++){
                 var a ="";
                 $("[name='more"+(i+1)+"']:checked").each(function () {
                   a +=$(this).val();
                 })
                 this.selectAnswer.answerMore.push(a);
               }
             }

             console.log(this.selectAnswer.answerMore);
           }

      },
      created() {
        //监听浏览器关闭事件
        window.addEventListener('beforeunload', this.closeWin);

      },
      mounted() {
        this.paperTime();
        this.queryExamByName();
      }
    }
</script>

<style scoped>
  @import url("../assets/css/main.css");

  @import url("../assets/css/test.css");

  .hasBeenAnswer {
    background: #5d9cec;
    color: #fff;
  }
  .reading h2 {
    width: 100%;
    margin: 20px 0 70px;
    text-align: center;
    line-height: 2;
    font-size: 20px;
    color: #59595b;
  }
  .reading h2 a {
    text-decoration: none;
    color: #59595b;
    font-size: 20px;
  }
  .reading h2 a:hover {
    color: #2183f1;
  }
</style>
